<template>
	<view class="pad_def pad_top">
		<u-toast ref="uToast" />
		<view class="header_switc box box-align-center box-pack-between pad_def ">
			<!-- 护眼策略 -->
			<view class="left">
				<view class="tit">
					平板护眼总开关
				</view>
				<view class="sub_tit">
					关闭由学生端自主设置相关护眼项开启由家长端设置生效
				</view>
			</view>
			<view class="right">
				<u-switch v-model="mainChecked" active-color="#5993ff" inactive-color="#e3e3e3"
					@change="editMainChange"></u-switch>
			</view>
		</view>

		<view class="control_list mar_top">
			<view class="tit pad_bot_big">
				教管壹场景式护眼远程管控设置
			</view>
			<view class="control_item box box-align-center box-pack-between pad_bot_big pad_top"
				v-for="item in jgy_contorl_list" :key="item.tit">
				<view class="left box box-align-center">
					<view class="icon">
						<image :src="item.checked ?item.imgOn :item.imgOff" mode="widthFix" style="width: 60rpx;">
						</image>
					</view>
					<view class="">
						<view class="tit">
							{{item.tit}}
						</view>
						<view class="sub_tit">
							{{item.sub_tit}}
						</view>
					</view>
				</view>
				<view class="right">
					<u-switch v-model="item.checked" active-color="#5993ff" inactive-color="#e3e3e3"
						@change="getChangeEye"></u-switch>
				</view>
			</view>
		</view>

		<view class="tired_time mar_top" v-if="false">
			<view class="top box box-align-center box-pack-between pad_bot">
				<view class="left box">
					<view class="icon">
						<image :src="tired?'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/sj1.png':'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/sj.png'"
							mode="widthFix" style="width: 60rpx;"></image>
					</view>
					<view class="left_txt">
						<view class="tit">
							疲劳提醒防控护眼
						</view>
						<view class="sub_tit">
							根据孩子学习习惯，可设置不同时长的学习疲劳提醒
						</view>
					</view>
				</view>
				<view class="right">
					<u-switch v-model="tired" active-color="#5993ff" inactive-color="#e3e3e3" @change="getChangeEye"></u-switch>
				</view>
			</view>
			<view class="set_time mar_def">
				<view class="ruler">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/ruler.png" mode=""></image>
				</view>
				<u-slider v-model="time_value" height="40" block-width="35" inactive-color="#fff" active-color="#5a93fe"
					@end="editTime" :disabled="!tired"></u-slider>
				<view class="tooltip" :style="{left:time_value - 12+'%'}">
					{{time_value*2}}分钟
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSetting,
		editSetting,
		addDefaultEyesConfig,
		getEyesConfig,
		delEyesConfig,
		editEyesConfig
	} from '@/api/systemControl.js'
	export default {
		data() {
			return {
				mainChecked: false,
				tired: false,
				time_value: 0,
				jgy_contorl_list: [{
						tit: '近距离使用防控护眼',
						sub_tit: '距屏幕30CM以内使用场景时出现提醒',
						checked: false,
						imgOff: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/jl.png',
						imgOn: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/jl1.png',
						db_name: 'distance'
					},
					// {tit:'卧躺使用防控护眼',sub_tit:'卧躺使用场景提醒',checked:false,imgOff:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/wt.png',imgOn:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/wt1.png',db_name: ''},
					{
						tit: '抖动使用防控护眼',
						sub_tit: '行车抖动或大幅度运动使用场景提醒',
						checked: false,
						imgOff: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/dd.png',
						imgOn: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/dd1.png',
						db_name: 'shake'
					},
					{
						tit: '环境光线感应使用防控护眼',
						sub_tit: '根据环境光线自动感应调节屏幕亮度',
						checked: false,
						imgOff: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/gx.png',
						imgOn: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/gx1.png',
						db_name: 'light'
					},
					{
						tit: '黑白阅读舒眼模式护眼',
						sub_tit: '非视屏学习状态下黑白舒眼模式阅读模式',
						checked: false,
						imgOff: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/yd.png',
						imgOn: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/yd1.png',
						db_name: 'black_white'
					},
				],
				sid: 0,
				eyes_config_id: 0,
			};
		},
		onLoad() {
			this.getSettingInfo()
		},
		methods: {
			editMainChange(e) {
				if (e) {
					addDefaultEyesConfig({
						id: uni.getStorageSync('snId'),
						userId: uni.getStorageSync('userId'),
						last_ip: uni.getStorageSync('Ip')
					}).then(res => {
						this.eyes_config_id = res.data.eyes_config_id
						this.$refs.uToast.show({
							title: res.msg,
							icon: false,
							type: 'success'
						})
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							icon: false,
							type: 'error'
						})
					})
				} else {
					delEyesConfig({
						id: uni.getStorageSync('snId'),
						userId: uni.getStorageSync('userId'),
						last_ip: uni.getStorageSync('Ip'),
						eyes_config_id: this.eyes_config_id
					}).then(res => {
						this.getSettingInfo()
						this.$refs.uToast.show({
							title: res.msg,
							icon: false,
							type: 'success'
						})
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							icon: false,
							type: 'error'
						})
					})
				}
			},

			getSettingInfo() {
				getEyesConfig({
					id: uni.getStorageSync('snId')
				}).then(res => {
					this.mainChecked = true
					let data = res.data
					this.eyes_config_id = res.data.id
					this.jgy_contorl_list.forEach((item, index, arr) => {
						arr[index].checked = data[item.db_name] == 1
					})
					this.tired = data['tired'] == 1
					this.time_value = data['time_value']
				}).catch(err => {
					this.jgy_contorl_list.forEach((item, index, arr) => {
						arr[index].checked = false
					})
					console.log('未获取到数据', err)
				})
			},


			getChangeEye() {
				let eyesMap = new Map()
				this.jgy_contorl_list.forEach((item, index, arr) => {
					eyesMap.set(item.db_name, item.checked)
				});
				let form = {
					'id': uni.getStorageSync('snId'),
					'userId': uni.getStorageSync('userId'),
					'last_ip': uni.getStorageSync('Ip'),
					'eyes_config_id': this.eyes_config_id,
					'distance': eyesMap.get('distance'),
					'shake': eyesMap.get('shake'),
					'light': eyesMap.get('light'),
					'black_white': eyesMap.get('black_white'),
					'tired': this.tired,
					'tired_time': this.time_value
				}
				editEyesConfig(form).then(res => {
					this.getSettingInfo()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			
			editTime() {
				// console.log((parseInt(this.time_value * 2) * 60),'修改的');
				let eyesMap = new Map()
				this.jgy_contorl_list.forEach((item, index, arr) => {
					eyesMap.set(item.db_name, item.checked)
				});
				let form = {
					'id': uni.getStorageSync('snId'),
					'userId': uni.getStorageSync('userId'),
					'last_ip': uni.getStorageSync('Ip'),
					'eyes_config_id': this.eyes_config_id,
					'distance': eyesMap.get('distance'),
					'shake': eyesMap.get('shake'),
					'light': eyesMap.get('light'),
					'black_white': eyesMap.get('black_white'),
					'tired': this.tired,
					'tired_time': parseInt(this.time_value * 2) * 60
				}
				editEyesConfig(form).then(res => {
					this.getSettingInfo()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header_switc {
		border-radius: 30rpx;
		background: #5070b9;
		padding: 50rpx 40rpx;

		.left {
			width: 60%;

			.tit {
				font-size: 30rpx;
				color: #fff;
			}

			.sub_tit {
				font-size: 24rpx;
				color: #7d9ce1;
				padding-right: 40rpx;
			}
		}
	}

	.control_list {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx;

		.tit {
			font-size: 34rpx;
			color: #414141;
		}

		.control_item {
			.left {
				.icon {
					margin-right: 10rpx;
				}

				.tit {
					font-size: 30rpx;
					color: #414141;
				}

				.sub_tit {
					font-size: 24rpx;
					color: #ccc;
					padding-right: 40rpx;
				}
			}
		}
	}

	.tired_time {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx;

		.left {
			.icon {
				margin-right: 10rpx;
			}

			.left_txt {
				.tit {
					font-size: 30rpx;
					color: #414141;
				}

				.sub_tit {
					font-size: 24rpx;
					color: #ccc;
					padding-right: 40rpx;
				}
			}
		}

		.set_time {
			position: relative;
			border: 1px solid #5a93fe;
			border-radius: 20rpx;

			.ruler {
				position: absolute;
				top: -16rpx;
				left: 0;
				width: 100%;
				height: 15rpx;
				z-index: 2;

				image {
					border-radius: 20rpx;
					width: 100%;
					height: 100%;
				}
			}

			.tooltip {
				position: absolute;
				top: 65rpx;
				white-space: nowrap;
				padding: 13rpx 23rpx;
				border-radius: 15rpx;
				background-color: #fff;
				box-shadow: 0 0 5px 1px #ccc;
				font-size: 28rpx;

				&:before {
					content: '';
					position: absolute;
					left: 50%;
					top: -20rpx;
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-bottom: 20rpx solid #fff;
					transform: translateX(-50%);
				}
			}

		}
	}
</style>